<template>
  <div class="index_a">
    <div class="psa">
      <el-select
        v-model="value县"
        placeholder="请选择一级机构"
        style="margin: 10px 0"
        class="search_style"
        @change="Xchange"
        :popper-append-to-body="false"
      >
        <el-option
          v-for="item in 县"
          :key="item.hospitalId"
          :label="item.hospitalName"
          :value="item.hospitalId"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="value乡"
        placeholder="请选择二级机构"
        style="margin: 10px 0"
        class="search_style2"
        @change="xchange"
        :popper-append-to-body="false"
      >
        <el-option
          v-for="item in 乡"
          :key="item.hospitalId"
          :label="item.hospitalName"
          :value="item.hospitalId"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="value村"
        placeholder="请选择三级机构"
        style="margin: 10px 0"
        class="search_style3"
        @change="xchange1"
        :popper-append-to-body="false"
      >
        <el-option
          v-for="item in 村"
          :key="item.hospitalId"
          :label="item.hospitalName"
          :value="item.hospitalId"
        >
        </el-option>
      </el-select>
    </div>
    <div class="psb">
      <!-- <el-select
        v-model="类型"
        placeholder="请选择类型"
        style="margin: 10px 10px"
        class="search_style3"
        @change="type_change"
        :popper-append-to-body="false"
      >
        <el-option label="不良事件等级" value="不良事件等级"> </el-option>
        <el-option label="SAC等级" value="SAC等级"> </el-option>
        <el-option label="SAC频率" value="SAC频率"> </el-option>
      </el-select> -->
      <el-date-picker
        v-model="value1"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
        @change="timer"
        format="yyyy 年 MM 月 dd 日"
        value-format="yyyy-MM-dd"
      >
      </el-date-picker>
    </div>
    <div>
      <dv-border-box-11
        title="不良事件管理中心"
        style="height: 100px"
        :color="['#31cae4']"
      ></dv-border-box-11>
    </div>

    <dv-border-box-7
      :color="['#31cae4']"
      style="display: inline-block; width: 98%; height: 200px; margin: 0 0.5%"
    >
      <el-row class="center_style" style="margin-top: 20px">
        <el-col :span="8" class="border_l"
          ><div class="center_num">{{ orr_all.事件上报总数 }}</div>
          <div>事件上报总数</div>
          <el-row style="margin-top: 10px">
            <el-col :span="6">
              <div class="TAC mmi">一级</div>
              <div class="TAC_num">{{ orr_all.一级 }}</div>
            </el-col>
            <el-col :span="6">
              <div class="TAC mmi">二级</div>
              <div class="TAC_num">{{ orr_all.二级 }}</div>
            </el-col>
            <el-col :span="6">
              <div class="TAC mmi">三级</div>
              <div class="TAC_num">{{ orr_all.三级 }}</div>
            </el-col>
            <el-col :span="6">
              <div class="TAC mmi">四级</div>
              <div class="TAC_num">{{ orr_all.四级 }}</div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="8" class="border_l"
          ><div class="center_num">{{ orr_all.saC等级总数 }}</div>
          <div>SAC等级总数</div>
          <el-row style="margin-top: 10px">
            <el-col :span="5">
              <div class="TAC mmi">严重</div>
              <div class="TAC_num">{{ orr_all.严重 }}</div>
            </el-col>
            <el-col :span="5">
              <div class="TAC mmi">重度</div>
              <div class="TAC_num">{{ orr_all.重度 }}</div>
            </el-col>
            <el-col :span="5">
              <div class="TAC mmi">中度</div>
              <div class="TAC_num">{{ orr_all.中度 }}</div>
            </el-col>
            <el-col :span="5">
              <div class="TAC mmi">轻度</div>
              <div class="TAC_num">{{ orr_all.轻度 }}</div>
            </el-col>
            <el-col :span="4">
              <div class="TAC mmi">轻微</div>
              <div class="TAC_num">{{ orr_all.轻微 }}</div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="8"
          ><div class="center_num">{{ orr_all.saC频率总数 }}</div>
          <div>SAC频率总数</div>
          <el-row style="margin-top: 10px">
            <el-col :span="5">
              <div class="TAC mmi">数周</div>
              <div class="TAC_num">{{ orr_all.数周 }}</div>
            </el-col>
            <el-col :span="5">
              <div class="TAC mmi">一年数次</div>
              <div class="TAC_num">{{ orr_all.一年数次 }}</div>
            </el-col>
            <el-col :span="5">
              <div class="TAC mmi min">一到两年一次</div>
              <div class="TAC_num">{{ orr_all.一到两年一次 }}</div>
            </el-col>
            <el-col :span="5">
              <div class="TAC mmi min">二到五年一次</div>
              <div class="TAC_num">{{ orr_all.二到五年一次 }}</div>
            </el-col>
            <el-col :span="4">
              <div class="TAC mmi">五年以上</div>
              <div class="TAC_num">{{ orr_all.五年以上 }}</div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </dv-border-box-7>
    <div>
      <dv-border-box-8
        :color="['#31cae4']"
        style="
          display: inline-block;
          width: 32%;
          height: 45px;
          margin: 0.5% 0.5% -0.7% 0.5%;
          text-align: center;
        "
        ><div class="title_style">不良事件等级</div></dv-border-box-8
      >
      <dv-border-box-8
        :color="['#31cae4']"
        style="
          display: inline-block;
          width: 32%;
          height: 45px;
          margin: 0.5% 0.5% -0.7% 0.5%;
          text-align: center;
        "
        ><div class="title_style">SAC等级</div></dv-border-box-8
      >
      <dv-border-box-8
        :color="['#31cae4']"
        style="
          display: inline-block;
          width: 32%;
          height: 45px;
          margin: 0.5% 0.5% -0.7% 0.5%;
          text-align: center;
        "
        ><div class="title_style">SAC频率</div></dv-border-box-8
      >
    </div>
    <dv-border-box-7
      :color="['#31cae4']"
      style="
        display: inline-block;
        width: 32%;
        height: 400px;
        margin: 0.5% 0.5% 0.2% 0.5%;
      "
    >
      <dv-scroll-board
        :config="config_不良事件等级"
        style="width: 100%; height: 395px"
      />
    </dv-border-box-7>
    <dv-border-box-7
      :color="['#31cae4']"
      style="
        display: inline-block;
        width: 32%;
        height: 400px;
        margin: 0.5% 0.5% 0.2% 0.5%;
      "
    >
      <dv-scroll-board
        :config="config_SAC等级"
        style="width: 100%; height: 395px"
      /> </dv-border-box-7
    ><dv-border-box-7
      :color="['#31cae4']"
      style="
        display: inline-block;
        width: 32%;
        height: 400px;
        margin: 0.5% 0.5% 0.2% 0.5%;
      "
    >
      <dv-scroll-board
        :config="config_SAC频率"
        style="width: 100%; height: 395px"
      />
    </dv-border-box-7>
  </div>
</template>

<script>
let echarts = require("echarts/lib/echarts");

export default {
  data() {
    return {
      县: [],
      乡: [],
      村: [],
      value县: "",
      value乡: "",
      value村: "",
      pickerOptions: {
        shortcuts: [
          {
            text: "当天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近六个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一年",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 360);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近两年",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 720);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三年",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1080);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value1: "",
      时间: {
        a: this.getDay(0),
        b: this.getDay(-365),
      },
      机构: [
        3015, 3019, 3021, 3022, 3024, 3025, 3027, 3028, 3029, 3030, 3031, 3032,
        3033, 3034, 3035, 3036, 3038, 3151,
      ],
      类型: "不良事件等级",
      config_不良事件等级: {
        header: ["机构名称", "一级", "二级", "三级", "四级"],
        data: [],
        oddRowBGC: "",
        evenRowBGC: "",
        evenRowBGC: "rgba(133,186,225,0.1)",
        rowNum: 9,
        columnWidth: [150],
      },
      config_SAC等级: {
        header: ["机构名称", "严重", "重度", "中度", "轻度", "轻微"],
        data: [],
        oddRowBGC: "",
        evenRowBGC: "",
        evenRowBGC: "rgba(133,186,225,0.1)",
        rowNum: 9,
        columnWidth: [150],
      },
      config_SAC频率: {
        header: [
          "机构名称",
          "数周",
          "一年数次",
          "一年一到两次",
          "二到两次一年",
          "五年以上",
        ],
        data: [],
        oddRowBGC: "",
        evenRowBGC: "",
        evenRowBGC: "rgba(133,186,225,0.1)",
        rowNum: 9,
        columnWidth: [150],
      },
      orr_all: {},
    };
  },
  mounted() {
    this.get县();
    this.gogo();
    this.drawLine();
  },
  methods: {
    get县() {
      this.$post(baseUrl.hrIP + "/rpt/person/getRegion").then((res) => {
        this.县 = res.data;
      });
    },
    Xchange(val) {
      this.乡 = [];
      this.村 = [];
      this.value乡 = "";
      this.value村 = "";
      this.机构 = [];
      // console.log(val);
      var body = {
        pId: val,
      };
      this.$post(baseUrl.hrIP + "/rpt/person/getRegion", body).then((res) => {
        this.乡 = res.data;
        this.机构.push(val);
        for (var i in res.data) {
          this.机构.push(res.data[i].hospitalId);
        }
        this.init(val);
      });
    },
    xchange(val) {
      this.村 = [];
      this.value村 = "";
      this.机构 = [];
      // console.log(val);
      var body = {
        pId: val,
      };
      this.$post(baseUrl.hrIP + "/rpt/person/getRegion", body).then((res) => {
        this.村 = res.data;
        this.机构.push(val);
        for (var i in res.data) {
          this.机构.push(res.data[i].hospitalId);
        }
        this.init(val);
      });
    },
    xchange1(val) {
      this.机构 = [];
      this.机构.push(val);
      this.init(val);
    },
    getDay(day) {
      var today = new Date();
      var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
      today.setTime(targetday_milliseconds); //注意，这行是关键代码

      var tYear = today.getFullYear();
      var tMonth = today.getMonth();
      var tDate = today.getDate();
      tMonth = this.doHandleMonth(tMonth + 1);
      tDate = this.doHandleMonth(tDate);
      return tYear + "-" + tMonth + "-" + tDate;
    },
    doHandleMonth(month) {
      var m = month;
      if (month.toString().length == 1) {
        m = "0" + month;
      }
      return m;
    },
    timer(flag) {
      var Timm = {
        a: this.value1[1],
        b: this.value1[0],
      };

      this.时间 = Timm;
      this.gogo();
    },
    init(val) {
      this.gogo();
    },
    gogo() {
      var item = {
        orgList: this.机构,
        startTime: this.时间.b,
        endTime: this.时间.a,
      };
      this.$post("/Aers/Bi/GetOrganAllCount", item).then((res) => {
        // 上方汇总
        this.orr_all = res.data;
      });
      this.$post("/Aers/Bi/GetOrganGrade", item).then((res) => {
        // 不良事件等级
        var newList = [];
        for (var i in res.data) {
          var 机构名称 = res.data[i].机构名称;
          var 一级 = res.data[i].一级;
          var 二级 = res.data[i].二级;
          var 三级 = res.data[i].三级;
          var 四级 = res.data[i].四级;
          let item = [机构名称, 一级, 二级, 三级, 四级];
          newList.push(item);
        }
        this.config_不良事件等级.data = newList;
        this.config_不良事件等级 = { ...this.config_不良事件等级 };
      });
      this.$post("/Aers/Bi/GetOrganSacLevel", item).then((res) => {
        // 不良事件SAC等级
        var newList = [];
        for (var i in res.data) {
          var 机构名称 = res.data[i].机构名称;
          var 严重 = res.data[i].严重;
          var 重度 = res.data[i].重度;
          var 中度 = res.data[i].中度;
          var 轻度 = res.data[i].轻度;
          var 轻微 = res.data[i].轻微;
          let item = [机构名称, 严重, 重度, 中度, 轻度, 轻微];
          newList.push(item);
        }
        this.config_SAC等级.data = newList;
        this.config_SAC等级 = { ...this.config_SAC等级 };
      });
      this.$post("/Aers/Bi/GetOrganSacRate", item).then((res) => {
        // 不良事件SAC频率
        var newList = [];
        for (var i in res.data) {
          var 机构名称 = res.data[i].机构名称;
          var 数周 = res.data[i].数周;
          var 一年数次 = res.data[i].一年数次;
          var 一到两年一次 = res.data[i].一到两年一次;
          var 二到五年一次 = res.data[i].二到五年一次;
          var 五年以上 = res.data[i].五年以上;
          let item = [
            机构名称,
            数周,
            一年数次,
            一到两年一次,
            二到五年一次,
            五年以上,
          ];
          newList.push(item);
        }
        this.config_SAC频率.data = newList;
        this.config_SAC频率 = { ...this.config_SAC频率 };
      });
    },
    drawLine() {},
  },
};
</script>

<style lang="scss" scoped>
.index_a {
  background-color: #00083e;
  width: 100%;
  height: 100vh;
  padding: 0 15px;
}
.psa {
  padding: 0 15px;
  z-index: 999;
  position: absolute;
  left: 20px;
  top: 32px;
}
.psb {
  padding: 8px 0;
  z-index: 999;
  position: absolute;
  right: 35px;
  top: 32px;
}
::v-deep .el-input--suffix .el-input__inner {
  padding-right: 10px;
}
::v-deep .el-input__inner {
  background-color: #00083e;
  color: #fff;
  border: 1px solid #31cae4;
}

.el-select-dropdown__item {
  font-size: 7px;
  line-height: 35px;
  color: #fff;
  font-weight: 200;
  background-color: #00083e;
}
::v-deep .el-select-dropdown {
  background-color: transparent;
  border: 1px solid blue;
}
::v-deep .el-select-dropdown__list {
  padding: 0 !important;
}
::v-deep .el-popper[x-placement^="bottom"] {
  margin-top: 0px;
}
::v-deep .el-popper .popper__arrow,
::v-deep .el-popper .popper__arrow::after {
  display: none;
}
.el-select-dropdown__item:hover {
  background-color: rgba(0, 225, 219, 0.690196078431373);
}
::v-deep .el-range-editor .el-range-input {
  background-color: #00083e;
  color: fff;
}
::v-deep .el-range-editor .el-range-separator {
  color: #fff;
}
::v-deep .el-date-editor .el-range-separator {
  padding: 0;
}
.title_style {
  font-size: 24px;
  font-weight: 700;
  line-height: 42px;
  color: #31cae4;
}
.center_style {
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  color: rgb(203, 238, 255);
  line-height: 35px;
}
.center_num {
  font-size: 36px;
  color: rgb(255, 220, 0);
  // text-shadow: 0px 0px 10px rgb(203, 238, 255);
}
.TAC {
  text-align: center;
}
.TAC_num {
  text-align: center;
  color: rgb(255, 220, 0);
  // text-shadow: 0px 0px 10px rgb(203, 238, 255);
}
.mmi {
  font-size: 20px;
}
.min {
  font-size: 18px;
}
.border_l {
  border-right: 2px solid rgb(0, 186, 255);
}
</style>